<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2024-02-29 21:51:18
 * @LastEditors: htang
 * @LastEditTime: 2024-03-01 01:37:36
-->
<template>
  <a-modal v-model:visible="visible" title="分派人员" @ok="handleOk">
    <div style="margin: 12px">
      <a-form ref="ruleForm" :model="model" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="第三方：">
          <a-checkbox v-model:checked="model.needRepair" @change="changeNeedRepair" />
        </a-form-item>
        <template v-if="model.needRepair == 1">
          <a-form-item label="维修金额：">
            <a-input v-model:value="model.repairePrice" type="number" :min="0" />
          </a-form-item>
          <a-form-item label="第三方单位：">
            <a-input v-model:value="model.componyName" />
          </a-form-item>
          <a-form-item label="联系方式" name="componyTel">
            <a-input v-model:value="model.componyTel" />
          </a-form-item>
        </template>
        <a-form-item label="转派人：">
          <a-select v-model:value="model.assignTo" allowClear placeholder="请选择">
            <template v-for="(item, index) in userList" :key="index">
              <a-select-option :value="item.username">
                {{ item.realname }}
              </a-select-option>
            </template>
          </a-select>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { watch, ref, nextTick, defineComponent, getCurrentInstance, computed } from 'vue';
import { listAllByUserDepartApi } from '/@/api/sys/user';
import { assginOrderApi } from '/@/api/order/index';
import { createVNode } from 'vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';
export default defineComponent({
  setup(props, { emit }) {
    let visible = ref(false);

    let model = ref({
      orderId: 0,
      needRepair: false,
      assignTo: '',
      repairePrice: '',
      componyName: '',
      componyTel: '',
    });

    // 用户列表
    let userList = ref([]);

    function init(data) {
      initListAllByUserDepart();
      model.value = {
        ...data,
      };
    }

    watch(
      () => visible.value,
      (val) => {
        if (val) {
          model.value = {
            orderId: 0,
            needRepair: false,
            assignTo: '',
            repairePrice: '',
            componyName: '',
            componyTel: '',
          };
        }
      }
    );

    /**
     * 初始化用户
     */
    function initListAllByUserDepart() {
      let data = {
        pageNo: 1,
        pageSize: 1000,
        thirdPart: model.value['needRepair'] == true ? 1 : 0,
      };
      listAllByUserDepartApi(data).then((res) => {
        let list = res.records;
        userList.value = list.map((_) => {
          _['text'] = _['realname'];
          _['value'] = _['username'];
          return _;
        });
      });
    }

    function changeNeedRepair(e) {
      initListAllByUserDepart();
    }

    function handleOk() {
      let { needRepair } = model.value;
      let data = {
        ...model.value,
        needRepair: needRepair ? 1 : 0,
      };
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定分派当前工单?',
        centered: true,
        onOk() {
          assginOrderApi(data).then((res) => {
            message.success('分派成功');
            visible.value = false;
            emit('oks');
          });
        },
        onCancel() {
          message.warning('已取消');
        },
      });
    }

    return {
      visible,
      userList,
      model,
      changeNeedRepair,
      handleOk,
      init,
    };
  },
});
</script>